<template>
  <div :class='{"my-qa":true,"is-special":!isFullScreen}' id="full-screen" @mousemove="showFullScreen" @mouseout="hideFullScreen">
    <div v-if="done==-1" class="qa-list no-open">
      <h3>答题闯关未开启</h3>
      <!-- <el-button class="open-btn" type="success" @click="$router.push('/questions/settings')">去开启</el-button> -->
    </div>
    <div v-else-if="done==0" class="qa-list">
      <!-- <span class="ques_num">
        <span>{{questionInfo.num}}</span>
      </span>
      <span class="ques_time">
        <el-progress type="circle" :percentage="questionInfo.percentage" :show-text="false"></el-progress>
        <span>{{questionInfo.time}}s</span>
      </span> -->

      <p class="title">
        <span>
          {{questionInfo.num}}、{{questionInfo.title}}
        </span>
        <span class="fr">{{questionInfo.time}}s</span>
      </p>
      <ul class="ans-list">
        <li v-for="(item,index) in listData" :key="index" :class="{'is-active':item.answer==questionInfo.answer}">
          {{item.answer}}
        </li>
      </ul>
    </div>
    <!-- done -->
    <div v-else-if="done==1" class="finished-box">
      <ul class="joiners-list my-scroll">
        <li v-for="(item, index) in joinerData" :key="index">
          <img :src="item.pic" alt="">
          <p class="name">{{item.name}}</p>
        </li>
      </ul>

      <!-- <Chart type="pie" :info="joinerData" ttid="myChart" /> -->
    </div>
    <!-- 全屏按钮 -->
    <FullScreen :hiddenFull="hiddenFull" :isFullScreen="isFullScreen" :fullScreen="fullScreen"></FullScreen>
  </div>
</template>
<script>
import FullScreen from "../../../components/fullScreen";
import Chart from '../../../components/chart'
export default {
  components: { FullScreen ,Chart},
  name: "",
  data() {
    return {
      done: -1, //答题状态：-1:未开启；0:已开启；1:已完成答题
      questionInfo: {
        num: 1,
        time:60,//倒计时
        percentage:100,//
        title: "我是题目",
        qId:'',//问题id
        answer: '',
        rightA:'',//保存下来的正确答案
      },
      imgs: {
        full: require("../../../assets/images/works/full.png"),
        cancelFull: require("../../../assets/images/works/cancel-full-screen.png"),
        clock:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544011672422&di=56dd34493955e9a36a0f8f8ea6a87890&imgtype=0&src=http%3A%2F%2Fpic33.photophoto.cn%2F20141119%2F0008020228028732_b.jpg'
      },
      listData: [
        { id: 1, answer: "我就是答案1" },
        { id: 2, answer: "我就是答案1" },
        { id: 3, answer: "我就是答案1" },
        { id: 4, answer: "我就是答案1" },
      ],

      // 优胜者数据
      joinerData: [
        
      ],

      isFullScreen: false, //是否在全屏显示
      settime: null, //显示全面的定时
      hiddenFull: false, // 隐藏

      settime1:null,
    };
  },
  methods: {
    setActive(item) {
      this.$set(this.questionInfo, "answer", item.id);
    },
    finished() {},

    fullScreen() {
      _g.fullScreen("full-screen", this);
    },
    showFullScreen(e) {
      var mouseY =
        e.clientY -
        document.querySelector(".work-menu").clientHeight -
        10 -
        document.querySelector("#full-screen").clientHeight;
      // console.log(mouseY)
      var heightModel = this.isFullScreen ? "-220" : "-40";
      if (mouseY > heightModel) {
        this.hiddenFull = true;
      } else {
        this.hiddenFull = false;
      }

      $("#full-screen").css({
        cursor: "auto"
      });
      if (this.settime) clearTimeout(this.settime);
      this.settime = setTimeout(() => {
        $("#full-screen").css({
          cursor: "none"
        });
      }, 2000);
    },
    hideFullScreen() {
      this.hiddenFull = false;
    },

    // 获取问题
    getQuestion(){
      _g.apiPost('answer/getQuestionInfo.do',{sequence:this.questionInfo.qId}).then(res=>{
        if(res.status==1){
          _g.toMessage(res)
          return
        }
        this.questionInfo.qId=res.data.sequenceNum+1
        this.questionInfo.num=res.data.sequenceNum
        this.questionInfo.title=res.data.content
        this.questionInfo.rightA=res.data.rightAnswer
        this.listData=[
          { id: 1, answer: res.data.optionA },
          { id: 1, answer: res.data.optionB },
          { id: 1, answer: res.data.optionC },
          { id: 1, answer: res.data.optionD },
        ]
      })
    },
    formalData(val){
      this.questionInfo.answer=""
      var result=JSON.parse(val)
      this.questionInfo.qId=result.sequenceNum+1
      this.questionInfo.num=result.sequenceNum
      this.questionInfo.title=result.content
      this.questionInfo.rightA=result.rightAnswer
      this.questionInfo.time=result.time||60
      this.listData=[
        { id: 1, answer: result.optionA },
        { id: 1, answer: result.optionB },
        { id: 1, answer: result.optionC },
        { id: 1, answer: result.optionD },
      ]
    },
    // 设置正确答案
    showRightAns(){
      this.$set(this.questionInfo,'answer',this.questionInfo.rightA)
    }
  },
  created() {
    var that=this
    window.onresize=function(){
      var show = document.querySelector("#full-screen").clientHeight==document.querySelector('html').clientHeight
      that.$set(that,"isFullScreen",show)
    }

    // this.getQuestion()
    // 监听正确答案
    _bus.$on("showActive",()=>{
      this.showRightAns()
    })
    _bus.$on("showNextQA",(val)=>{
      this.done=0
      if(val=='display'){
        this.showRightAns()
      }else if(val=='pass'){
        // 答题结束
        this.done=1
        _g.apiPost('grade/getPassUser.do').then(res=>{
          var goal=[]
          res.data.forEach(ele => {
            goal.push({
              name:ele.name,
              pic:ele.headPic||"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3096387399,1239408417&fm=111&gp=0.jpg"
            })
          });
          this.$set(this,'joinerData',goal)
        })
      }else{
        this.formalData(val)
        var rate = this.questionInfo.time / this.questionInfo.percentage
        clearInterval(this.settime1)
        this.settime1=setInterval(()=>{
          this.questionInfo.time=(this.questionInfo.time - 0.1).toFixed(2)
          // this.questionInfo.percentage=this.questionInfo.time / rate
          // if(this.$refs.times)this.$refs.times.classList.add('ft40')
          // setTimeout(()=>{
          //   if(this.$refs.times)this.$refs.times.classList.remove('ft40')
          // },700)
          if(this.questionInfo.time==0){
            clearInterval(this.settime1)
            this.showRightAns()
          }
        },100)
      }
      // console.log(val)
    })
  },
  beforeDestroy(){
    // window.onresize=null
    _bus.$off('showActive')
    _bus.$off('showNextQA')
    clearInterval(this.settime1)
  },
  mounted(){
    // var rate = this.questionInfo.time / this.questionInfo.percentage
    // this.settime1=setInterval(()=>{
    //   this.questionInfo.time=(this.questionInfo.time - 0.01).toFixed(2)
    //   this.questionInfo.percentage=this.questionInfo.time / rate 
    //   console.log(this.questionInfo.percentage)
    //   if(this.questionInfo.time==0){
    //     clearInterval(this.settime1)
    //     this.showRightAns()
    //   }
    // },10)
  }
};
</script>
<style lang="scss" scoped>
.is-special.my-qa{
  background-size:120%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.my-qa {
  width: 100%;
  background: url("http://cdn.xiaoyuandake.com/bg201812301722.jpg");
  background-size: cover;
  min-height: 100%;
  position: relative;
  overflow: hidden;

  .ques_time{
    position: absolute;
    width: 150px;
    height: 126px;
    top: 70%;
    left: -180px;
    font-size: 30px;
    transform: translateY(-50%);
    // border: 2px solid #fff;
    text-align: center;

    >img{
      width: 100%;
      height: 100%;
    }

    span {
      position: absolute;
      left: 3px;
      top: 3px;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      // background-color: #fff;
      line-height: 120px;
      transition: all .6s;
      color: #fff;
    }
    span.ft40{
      font-size: 40px;
      // background-color:gold;
    }
  }

  .ques_num {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 30%;
    left: -150px;
    font-size: 30px;
    transform: translateY(-50%);
    color: red;
    border: 2px solid #fff;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
    font-weight: 600;

    span {
      position: absolute;
      left: 3px;
      top: 3px;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      border-radius: 50%;
      background-color: #fff;
      line-height: 80px;
    }
  }

  .qa-list {
    position: absolute;
    width: 50%;
    min-width: 800px;
    max-width: 1000px;
    min-height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba($color: #000, $alpha: 0.5);
    border: 1px solid #fff;
  }
  p.title {
    background-color: #fff;
    color: red;
    padding: 15px;
    font-size: 24px;
    line-height: 30px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: flex;

    >span:nth-of-type(1){
      flex-grow: 1
    }
    >span.fr{
      padding-left: 15px;
    }
  }
  .ans-list {
    margin: 0 15%;
    box-sizing: border-box;

    li {
      background-color: #fff;
      font-size: 18px;
      min-height: 30px;
      line-height: 30px;
      text-align: center;
      margin: 30px 0;
      border-radius: 4px;
      color: #666;
      padding: 10px;
    }
    li.is-active {
      color: #fff;
      font-weight: 600;
      background-color: #3faa0a
      // font-size: 20px;
    }
  }

  .finished-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 40px;
    width: 60vw;
    height: 31vw;
    background: url("../../../assets/images/works/bac_success.jpg");
    background-size: cover;
    // background-size: 200%;
    // background-position: 50% 40%;
    background-repeat: no-repeat;
    box-sizing: border-box;

    .joiners-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 7vw;
      margin-bottom: 7vw;
      height:calc(100% - 14vw);
      box-sizing: border-box;
      overflow: auto;

      li {
        margin: 5px;
      }

      img {
        border-radius: 50%;
        width: 80px;
        height: 80px;
      }
      p {
        text-align: center;
        color: #fff;
        line-height: 30px;
      }
    }
  }
  .ques_opa{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(150%,-50%);

    span{
      cursor: pointer;
      color: #fff;
      font-size: 24px;
      display: block;
      text-align: center;
    }
  }

  .no-open{

    >h3{
      line-height: 200px;
      text-align: center;
      font-size: 28px;
      color: #fff;
    }
    .open-btn{
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
  }
}
</style>